<template>
  <div id="editro">
    <div id="wrapper">
        <div id="control-area">
            <div class="btn-group">
                <a href="#" class='btn left blue' data-command='undo' @click="changeStyle($event)">◀撤销</a>
                <a href="#" class='btn right blue' data-command='redo' @click="changeStyle($event)">重做▶</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left grey' data-command='italic' @click="changeStyle($event)">斜体</a>
                <a href="#" class='btn middle grey' data-command='bold' @click="changeStyle($event)">粗体</a>
                <a href="#" class='btn middle grey' data-command='underline' @click="changeStyle($event)">下划线</a>
                <a href="#" class='btn right grey' data-command='strikeThrough' @click="changeStyle($event)">删除线</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left blue' data-command='justifyLeft' @click="changeStyle($event)">左</a>
                <a href="#" class='btn middle blue' data-command='justifyCenter' @click="changeStyle($event)">居中</a>
                <a href="#" class='btn middle blue' data-command='justifyRight' @click="changeStyle($event)">右</a>
                <a href="#" class='btn right blue' data-command='justifyFull' @click="changeStyle($event)">两端</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left grey' data-command='indent' @click="changeStyle($event)">右缩进</a>
                <a href="#" class='btn right grey' data-command='outdent' @click="changeStyle($event)">左缩进</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left blue' data-command='insertOrderedList' @click="changeStyle($event)">有序列表</a>
                <a href="#" class='btn right blue' data-command='insertUnorderedList' @click="changeStyle($event)">无序列表</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left grey' data-command='superscript' @click="changeStyle($event)">上标</a>
                <a href="#" class='btn right grey' data-command='subscript' @click="changeStyle($event)">下标</a>
            </div>

            <div class="btn-group">
                <a href="#" class='btn left blue' data-command='selectAll' @click="changeStyle($event)">全选</a>
                <a href="#" class='btn middle blue' data-command='copy' @click="changeStyle($event)">复制</a>
                <a href="#" class='btn right blue' data-command='cut' @click="changeStyle($event)">剪切</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left grey' data-command='fontSize' data-value="1" @click="changeStyle($event)">1号</a>
                <a href="#" class='btn middle grey' data-command='fontSize' data-value="2" @click="changeStyle($event)">2号</a>
                <a href="#" class='btn middle grey' data-command='fontSize' data-value="3" @click="changeStyle($event)">3号</a>
                <a href="#" class='btn middle grey' data-command='fontSize' data-value="4" @click="changeStyle($event)">4号</a>
                <a href="#" class='btn middle grey' data-command='fontSize' data-value="5" @click="changeStyle($event)">5号</a>
                <a href="#" class='btn middle grey' data-command='fontSize' data-value="6" @click="changeStyle($event)">6号</a>
                <a href="#" class='btn right grey' data-command='fontSize' data-value="7" @click="changeStyle($event)">7号</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left blue' data-command='fontName' data-value="SimSun" @click="changeStyle($event)">宋</a>
                <a href="#" class='btn middle blue' data-command='fontName' data-value="SimHei" @click="changeStyle($event)">黑</a>
                <a href="#" class='btn middle blue' data-command='fontName' data-value="KaiTi" @click="changeStyle($event)">楷</a>
                <a href="#" class='btn middle blue' data-command='fontName' data-value="FangSong" @click="changeStyle($event)">仿宋</a>
                <a href="#" class='btn right blue' data-command='fontName' data-value="Microsoft YaHei" @click="changeStyle($event)">雅黑</a>
            </div>
            <div class="btn-group">
                <a href="#" class='btn left' data-command='foreColor' data-value="red" @click="changeStyle($event)"
                    style="background-color: red">&nbsp;&nbsp;</a>
                <a href="#" class='btn middle' data-command='foreColor' data-value="orange" @click="changeStyle($event)"
                    style="background-color: orange">&nbsp;&nbsp;</a>
                <a href="#" class='btn middle' data-command='foreColor' data-value="yellow" @click="changeStyle($event)"
                    style="background-color: yellow">&nbsp;&nbsp;</a>
                <a href="#" class='btn middle' data-command='foreColor' data-value="green" @click="changeStyle($event)"
                    style="background-color: green">&nbsp;&nbsp;</a>
                <a href="#" class='btn middle' data-command='foreColor' data-value="cyan" @click="changeStyle($event)"
                    style="background-color: cyan">&nbsp;&nbsp;</a>
                <a href="#" class='btn middle' data-command='foreColor' data-value="blue" @click="changeStyle($event)"
                    style="background-color: blue">&nbsp;&nbsp;</a>
                <a href="#" class='btn middle' data-command='foreColor' data-value="purple" @click="changeStyle($event)"
                    style="background-color: purple">&nbsp;&nbsp;</a>
            </div>
        </div>
        <div id="text-area" contenteditable></div>
        <div id="submit-btn">
            <a href="#" class='btn left blue' onclick="console.log(document.getElementById('text-area').innerHTML)">点击打印文本区域内容（含格式，控制台查看）</a>
        </div>
    </div>
  </div>
</template>

<script>
export default {


  name: 'Editor',
  props: {
    msg: String
  },
  methods:{
        changeStyle:function(e){
            var data = e.srcElement.dataset
            data.value ? document.execCommand(data.command, false, data.value) : document.execCommand(data.command, false, null);
        }
},
}
</script>
<style>
        #wrapper {
            border: 1px solid #dddddd;
        }

        #text-area {
            background: #272822;
            padding: 10px;
            height: auto;
            min-height: 100px;
            max-height: 500px;
            color: #e5e5e5;
            border-radius: 5px;
            overflow: auto;
        }

        #control-area {
            margin-bottom: 5px;
        }

        #submit-btn {
            margin-top: 5px;
            width: 265px;
            float: right;
            margin-right: 20px;
        }

        .btn {
            display: block;
            font-size: 12px;
            text-decoration: none !important;
            padding: 3px 5px;
            border-radius: 3px;
            box-shadow: inset 0px 0px 2px #fff;
        }

        .left {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .middle {
            border-radius: 0;
        }

        .right {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .btn-group {
            display: inline-block;
        }

        .btn-group .btn {
            margin-right: -5px;
            display: inline-block;
        }

        .btn-group .right {
            margin-right: 10px;
        }

        .grey {
            color: #444;
            border: 1px solid #d0d0d0;
            background-image: -moz-linear-gradient(#ededed, #e1e1e1);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(#ededed));
            background-image: -webkit-linear-gradient(#ededed, #e1e1e1);
            background-image: -o-linear-gradient(#ededed, #e1e1e1);
            text-shadow: 1px 1px 1px #fff;
            background-color: #e1e1e1;
        }

        .blue {
            color: #41788c;
            border: 1px solid #6fb1c7;
            background-image: -moz-linear-gradient(#aae5f7, #73d0f1);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73d0f1), to(#aae5f7));
            background-image: -webkit-linear-gradient(#aae5f7, #73d0f1);
            background-image: -o-linear-gradient(#aae5f7, #73d0f1);
            text-shadow: 1px 1px 1px #bfeafb;
            background-color: #73d0f1;
        }
</style>
